<template>
	<view :class="['lb-picker', inline ? 'lb-picker-inline' : '']">
		<!-- 默认插槽 -->
		<view v-if="!inline" class="lb-picker-default-slot" @tap="show">
			<slot></slot>
		</view>

		<!-- 遮罩层 -->
		<view v-if="visible && showMask && !inline&&shade"
			:class="['lb-picker-mask', animation ? 'lb-picker-mask-animation' : '']" :style="{
        backgroundColor: maskBgColor,
        zIndex: zIndex - 1
      }" @tap.stop="handleMaskTap" @touchmove.stop.prevent="moveHandle">
		</view>

		<view v-if="visible || inline" ref="container" class="selectView" :class="[
        'lb-picker-container',
        !inline ? 'lb-picker-container-fixed' : '',
        animation ? 'lb-picker-container-animation' : '',
        containerVisible ? 'lb-picker-container-show' : ''
      ]" :style="{
        borderRadius: `${radius} ${radius} 0 0`,
        zIndex: zIndex
      }">
			<view v-if="showHeader" class="lb-picker-header">

				<!-- 头部顶部插槽 -->
				<slot name="header-top"></slot>
				<view class="lb-picker-header-actions"
					style="box-shadow: 9upx 9upx 80upx 8upx rgba(155, 155, 155, 0.46);">
					<!-- 取消 -->
					<view v-if="cancelView" class="lb-picker-action lb-picker-action-cancel" @tap.stop="handleCancel">
						<slot v-if="$slots['cancel-text']" name="cancel-text">
						</slot>
						<text v-else class="lb-picker-action-cancel-text"
							:style="{ color: cancelColor }">{{ cancelText }}</text>
					</view>
					<view v-if="!cancelView" class="lb-picker-action lb-picker-action-cancel">
					</view>

					<!-- 中间 v-if="$slots['action-center']"-->
					<view class="lb-picker-action lb-picker-center">
						<slot name="action-center"></slot>
						<text class="lb-picker-action-confirm-text"
							:style="{ color: centerColor }">{{ centerText }}</text>
					</view>

					<!-- 确定 -->
					<button style="margin: 0;background: none;" :disabled="disabledConfirm"
						class="lb-picker-action lb-picker-action-confirm" @tap.stop="handleConfirm">
						<slot v-if="$slots['confirm-text']" name="confirm-text"> </slot>
						<text v-else class="lb-picker-action-confirm-text"
							:style="{ color: confirmColor }">{{ confirmText }}</text>
					</button>
				</view>

				<!-- 头部底部插槽 -->
				<slot name="header-bottom"></slot>
			</view>

			<view :class="[
        'lb-picker-content',
        safeAreaInsetBottom ? 'lb-picker-content-safe-buttom' : ''
      ]">

				<!-- 选择器顶部插槽 -->
				<slot name="picker-top"></slot>

				<view class="lb-picker-content-main" :style="{ height: pickerContentHeight }">
					<!-- loading -->
					<view v-if="loading" class="lb-picker-loading">
						<slot name="loading">
							<image class="lb-picker-loading-img"
								src="">
							</image>
						</slot>
					</view>

					<!-- 暂无数据 -->
					<view v-if="isEmpty && !loading && mode !== 'dateSelector'" class="lb-picker-empty">
						<slot name="empty">
							<text class="lb-picker-empty-text" :style="{ color: emptyColor }">{{ emptyText }}</text>
						</slot>
					</view>

					<!-- 单选 -->
					<selector-picker v-if="mode === 'selector' && !loading && !isEmpty" :ref="mode" :value="value"
						:list="list" :mode="mode" :props="pickerProps" :height="pickerContentHeight" :inline="inline"
						:column-style="columnStyle" :active-column-style="activeColumnStyle" :align="align"
						:press-enable="pressEnable" :press-time="pressTime" :formatter="formatter"
						@change="handleChange"
						@slide="slide">
					</selector-picker>

					<!-- 多列联动 -->
					<multi-selector-picker v-if="mode === 'multiSelector' && !loading && !isEmpty" :ref="mode"
						:value="value" :list="list" :mode="mode" :level="level" :visible="visible" :props="pickerProps"
						:height="pickerContentHeight" :inline="inline" :column-style="columnStyle"
						:active-column-style="activeColumnStyle" :align="align" :press-enable="pressEnable"
						:press-time="pressTime" :formatter="formatter" @change="handleChange"
						@slide="slide">
					</multi-selector-picker>

					<!-- 非联动选择 -->
					<unlinked-selector-picker v-if="mode === 'unlinkedSelector' && !loading && !isEmpty" :ref="mode"
						:value="value" :list="list" :mode="mode" :visible="visible" :props="pickerProps"
						:height="pickerContentHeight" :inline="inline" :column-style="columnStyle"
						:active-column-style="activeColumnStyle" :align="align" :press-enable="pressEnable"
						:press-time="pressTime" :formatter="formatter" @change="handleChange"
						@slide="slide">
					</unlinked-selector-picker>

					<!-- 日期选择 -->
					<date-selector-picker v-if="mode === 'dateSelector' && !loading" :ref="mode" :value="value"
						:mode="mode" :visible="visible" :height="pickerContentHeight" :inline="inline"
						:column-style="columnStyle" :active-column-style="activeColumnStyle" :align="align"
						:formatter="formatter" :format="format" :display-format="displayFormat" :start-date="startDate"
						:end-date="endDate" :default-time-limit="defaultTimeLimit" :is-show-chinese="isShowChinese"
						:ch-config="pickerChConfig" :filter="filter" @change="handleChange"
						@slide="slide">
					</date-selector-picker>
				</view>

				<!-- 选择器底部插槽 -->
				<slot name="picker-bottom"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	const defaultMaskBgColor = 'rgba(0, 0, 0, 0)'
	const defaultProps = {
		label: 'label',
		value: 'value',
		children: 'children'
	}
	const defaultChConfig = {
		year: '年',
		month: '月',
		day: '日',
		hour: '时',
		minute: '分',
		second: '秒'
	}
	// #ifdef APP-NVUE
	const animation = weex.requireModule('animation')
	// #endif
	import {
		getColumns
	} from './utils'
	import SelectorPicker from './pickers/selector-picker'
	import MultiSelectorPicker from './pickers/multi-selector-picker'
	import UnlinkedSelectorPicker from './pickers/unlinked-selector-picker'
	import DateSelectorPicker from './pickers/date-selector-picker'
	export default {
		components: {
			SelectorPicker,
			MultiSelectorPicker,
			UnlinkedSelectorPicker,
			DateSelectorPicker
		},
		props: {
			value: [String, Number, Array],
			list: Array,
			mode: {
				type: String,
				default: 'selector'
			},
			level: {
				type: Number,
				default: 1
			},
			props: {
				type: Object
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelColor: {
				type: String,
				default: '#2EA7E0'
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			centerText: {
				type: String,
				default: '请选择'
			},
			confirmColor: {
				type: String,
				default: '#2EA7E0'
			},
			centerColor: {
				type: String,
				default: '#000000;'
			},
			cancelView: {
				type: Boolean,
				default: true
			},
			shade: {
				type: Boolean,
				default: true
			},
			canHide: {
				type: Boolean,
				default: true
			},
			emptyColor: {
				type: String,
				default: '#999'
			},
			emptyText: {
				type: String,
				default: '暂无数据'
			},
			radius: String,
			columnNum: {
				type: Number,
				default: 5
			},
			loading: Boolean,
			closeOnClickMask: {
				type: Boolean,
				default: true
			},
			showMask: {
				type: Boolean,
				default: true
			},
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.4)'
			},
			dataset: Object,
			inline: Boolean,
			showHeader: {
				type: Boolean,
				default: true
			},
			animation: {
				type: Boolean,
				default: true
			},
			zIndex: {
				type: Number,
				default: 999
			},
			safeAreaInsetBottom: {
				type: Boolean,
				default: true
			},
			disabled: Boolean,
			columnStyle: Object,
			activeColumnStyle: Object,
			align: {
				type: String,
				default: 'center'
			},
			pressEnable: Boolean,
			pressTime: {
				type: Number,
				default: 500
			},
			formatter: Function,
			format: {
				type: String,
				default: 'YYYY-MM-DD'
			},
			displayFormat: {
				type: String,
				default: 'YYYY-MM-DD'
			},
			startDate: String,
			endDate: String,
			defaultTimeLimit: {
				type: Number,
				default: 20
			},
			isShowChinese: {
				type: Boolean,
				default: true
			},
			chConfig: Object,
			filter: Function
		},
		data() {
			return {
				disabledConfirm: false,
				visible: false,
				containerVisible: false,
				maskBgColor: defaultMaskBgColor,
				myValue: this.value,
				picker: {},
				pickerProps: Object.assign({}, defaultProps, this.props),
				pickerChConfig: Object.assign({}, defaultChConfig, this.chConfig)
			}
		},
		computed: {
			pickerContentHeight() {
				return 34 * this.columnNum + 'px'
			},
			isEmpty() {
				if (this.mode === 'dateSelector') return false
				if (!this.list && this.mode !== 'dateSelector') return true
				if (this.list && !this.list.length) return true
				return false
			}
		},
		methods: {
			slide(e){
				// console.log(e,'3144444444444444444')
				this.disabledConfirm = e
			},
			show() {
				if (this.inline || this.disabled) return
				this.visible = true
				setTimeout(() => {
					this.maskBgColor = this.maskColor
					// #ifndef APP-NVUE
					this.containerVisible = true
					// #endif
					// #ifdef APP-NVUE
					this.wxAnimation(0)
					// #endif
				}, 20)
			},
			hide() {
				if (this.inline) return
				this.maskBgColor = defaultMaskBgColor
				// #ifndef APP-NVUE
				this.containerVisible = false
				// #endif
				// #ifdef APP-NVUE
				this.wxAnimation('100%')
				// #endif
				setTimeout(() => {
					this.visible = false
				}, 300)
			},
			handleCancel() {
				this.$emit('cancel', this.picker)
				if (this.canHide && !this.inline) {
					this.hide()
				}
			},
			handleConfirm() {
				if (this.isEmpty) {
					this.$emit('confirm', null)
					this.hide()
				} else {
					let zIndex = this.zIndex;
					if (zIndex == 1000) {
						const picker = {
							...this.picker
						}
						this.$refs[this.mode].isConfirmChange = true
						// this.myValue = picker.value
						if (picker.value[1] < picker.value[3]) {
							uni.showToast({
								title: '舒张压不可大于收缩压',
								icon: 'none',
								duration: 2000
							});
						} else {
							const picker = {
								...this.picker
							}
							this.$refs[this.mode].isConfirmChange = true
							this.myValue = picker.value
							this.$emit('confirm', this.picker)
							if (this.canHide) this.hide()
						}
					} else {
						const picker = {
							...this.picker
						}
						this.$refs[this.mode].isConfirmChange = true
						this.myValue = picker.value
						this.$emit('confirm', this.picker)
						if (this.canHide) this.hide()
					}

				}
			},
			handleChange({
				value,
				valueArr,
				item,
				index,
				change
			}) {
				if (this.mode === 'dateSelector') {
					this.picker.valueArr = valueArr
				}
				this.picker.value = value
				this.picker.item = item
				this.picker.index = index
				this.picker.change = change
				this.picker.dataset = this.dataset || {}
				if (this.$refs[this.mode] && this.inline) {
					this.$refs[this.mode].isConfirmChange = true
				}
				this.$emit('change', this.picker)
			},
			handleMaskTap() {
				if (this.closeOnClickMask) {
					this.hide()
				}
			},
			moveHandle() {},
			// #ifdef APP-NVUE
			wxAnimation(num) {
				const $container = this.$refs.container
				animation.transition($container, {
					styles: {
						transform: `translateY(${num})`
					},
					duration: 300
				})
			},
			// #endif 
			getColumnsInfo(value, type = 1) {
				let columnsInfo = getColumns({
						value,
						list: this.list,
						mode: this.mode,
						props: this.pickerProps,
						level: this.level
					},
					type
				)
				if (columnsInfo) {
					if (this.mode === 'selector') {
						columnsInfo.index = columnsInfo.index[0]
					}
				} else {
					columnsInfo = {}
				}
				columnsInfo.dataset = this.dataset || {}
				return columnsInfo
			}
		},
		watch: {
			value(newVal) {
				this.myValue = newVal
			},
			myValue(newVal) {
				this.$emit('input', newVal)
			},
			visible(newVisible) {
				if (newVisible) {
					this.$emit('show')
				} else {
					this.$emit('hide')
				}
			},
			props(newProps) {
				this.pickerProps = Object.assign({}, defaultProps, newProps)
			},
			chConfig(newVal) {
				this.pickerChConfig = Object.assign({}, defaultChConfig, newVal)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./style/picker.scss";
</style>
